<template>
  <view class="mz-form-item">
    <view v-if="label" class="mz-form-item__left">
      <view class="mz-form-item__label">
        <text>{{label}}</text>
      </view>
      <view v-if="note" class="mz-form-item__note">{{ note }}</view>
    </view>
    <view :style="{'text-align':textAlignStyle}" :class="{'disabled':disabled}" class="mz-form-item__content">
      <view style="width:100%">
        <slot></slot>
      </view>
      <slot name="right"></slot>
      <view v-if="showArrow" class="mz-form-item_arrow">
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    padding: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: ""
    },
    textAlign: {
      type: String,
      default: "left"
    },
    showLabel: {
      type: Boolean,
      default: true
    },
    showArrow: {
      type: Boolean,
      default: false
    },
    note: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    textAlignStyle() {
      return this.textAlign;
    }
  }
};
</script>

<style scoped lang="scss">
.mz-form-item {
  font-size: $uni-font-size-lg;
  display: flex;
  align-items: center;
  padding: $form-item-padding;
  background-color: #ffffff;
  // border-bottom: $uni-bg-color-grey;
  border-bottom: 1px solid $uni-bg-color-grey;
  &:last-child {
    border-bottom: 0;
  }
  .disabled {
    // background-color: #eeeeee;
    // color: #eeeeee;
    opacity: $uni-opacity-disabled;
  }
  .mz-form-item__left {
    min-width: 190rpx;
    font-size: $uni-font-size-lg;
    .mz-form-item__note {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }
  .mz-form-item__content {
    flex-grow: 2;
    height: 100%;
    // align-items: center;
    position: relative;
    display: flex;
    justify-content: flex-end;
    // justify-items: end;
    .mz-form-item_arrow {
      // text-align: right;
      display: inline-block;
      margin-right: -10rpx;
      // height: 100%;
      // display: flex;
      // align-items: center;
    }
  }
}
</style>
